import { useContext } from "react";
import { NoteContext } from "../context";
import { updateNote } from "../request/api";
const Color = ({ color }) => {
  const { notes, setNotes, selectedNote } = useContext(NoteContext);

  const changeColor = () => {
    try {
      // 修改 notes 数组的状态
      const currentNoteIndex = notes.findIndex((note) => note._id === selectedNote._id);

      const updatedNote = {
        ...notes[currentNoteIndex],
        colors: color,
      };

      const newNotes = [...notes];
      newNotes[currentNoteIndex] = updatedNote;
      setNotes(newNotes);

      // 改数据库
      updateNote(selectedNote._id, { colors: color });
    } catch (error) {
      alert("在修改颜色之前，得先选择一个note", error);
    }
  };

  return (
    <div
      className="color"
      style={{ backgroundColor: color.colorHeader }}
      onClick={changeColor}
    ></div>
  );
};
export default Color;
